<template>
  <el-dialog title="码盘机操作" v-model="dialogVisible" width="60%">
    <el-form label-width="120px" @submit.prevent>
      <el-form-item label="选择仓库">
        <el-radio-group v-model="whId">
          <el-radio-button v-for="i in whOptions" :key="i.WarehouseId" :label="`${i.WarehouseCode} ${i.WarehouseName}`"
            :value="i.WarehouseId">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mt-20" label="作业类型">
        <el-radio-group v-model="doType" :disabled="!whId">
          <el-radio-button v-for="i in typeOptions" :key="i.value" :label="`${i.label}`" :value="i.value">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item class="mt-20" label="目标点位" v-if="doType == 2 || doType == 3">
        <el-radio-group v-model="positionId">
          <el-radio-button v-for="i in positionOptions" :key="i.PositionId" :value="i.PositionId"
            :label="i.PositionCode">
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="mt-20" label="扫描容器" v-if="doType == 2">
        <el-input ref="containerCode" v-model="containerCode" placeholder="扫描容器条码或输入按回车"
          @keyup.enter.prevent="afterScanContainer" clearable></el-input>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    warehouseId: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.modelValue
      },
      set: function (v) {
        this.$emit('update:modelValue', v)
      },
    },
  },
  data: function () {
    return {
      whId: null,
      positionId: null,
      doType: null,
      whOptions: [],
      typeOptions: [
        { value: 0, label: '全部托盘入库' },
        { value: 1, label: '库内托盘出库' },
        { value: 2, label: '收单个托盘' },
        { value: 3, label: '出单个托盘' },
      ],
      positionOptions: [],
      btnLoading: false,
      containerCode: null,
    }
  },
  watch: {
    warehouseId(v) {
      this.whId = v
    },
    whId(v) {
      this.getPositions()
    },
  },
  methods: {
    getWhs() {
      this.http
        .post(this.$api.warehouse + 'getPageData', {
          rows: 100,
          wheres: JSON.stringify([]),
        })
        .then((r) => {
          this.whOptions = r.rows.sort((a, b) => (a.WarehouseCode > b.WarehouseCode ? 1 : -1))
        })
    },
    getPositions() {
      let wheres = [
        { name: 'WarehouseId', value: this.whId },
        // { name: 'IsStockInPort', value: 1 },
        // { name: 'IsStockOutPort', value: 1 },
      ]
      this.http
        .post(this.$api.position + 'getPageData', {
          rows: 100,
          wheres: JSON.stringify(wheres),
        })
        .then((r) => {
          let data = r.rows.filter(i => i.IsStockInPort == 1 || i.IsStockOutPort == 1)
          this.positionOptions = data.sort((a, b) => (a.PositionCode > b.PositionCode ? 1 : -1))
        })
    },
    afterScanContainer() { },
    async confirm() {
      let url = this.$api.WmsMpj
      switch (this.doType) {
        case 0:
          url = url + 'ContainerPutAwayFromMpj'
          break
        case 1:
          url = url + 'ContainerPullOffToMpj'
          break
        case 3:
          url = url + 'MpjToCrk'
          break
        case 2:
          url = url + 'CrkToMpj'
          break

        default:
          break
      }
      this.btnLoading = true
      let data = {
        WarehouseId: this.whId,
        PositionId: this.positionId,
        ContainerCode: this.doType == 2 ? this.containerCode : null,
      }
      this.http
        .post(url, data)
        .then((r) => {
          this.$message.success('操作成功')
          this.dialogVisible = false
          this.positionId = null
          this.containerCode = null
        })
        .finally(() => {
          this.btnLoading = false
        })
    },
  },
  created() {
    this.getWhs()
  },
  activated() { },
  mounted() { },
}
</script>
<style lang="scss" scoped>
:deep(.el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner) {
  background-color: #7300e6;
}
</style>
